<template>
    <div id='container'>
        <h2>评论回复:</h2>
        <h1 v-if="!userData.length">暂无回复,点击左侧添加评论!!!</h1>
        <div v-for="(item) in userData" :key="item.id">
            <CommentItem :commentObj="item" ></CommentItem>
        </div>
    </div> 
</template>

<script>
import CommentItem from '../CommentItem'
export default {
    name: 'CommentList',
    mounted(){
        this.$EventBus.$on('getUserData',(sonUserName,sonComment) => {
            console.log(sonUserName,sonComment);
            if(!sonUserName){
                alert('请输入用户名');
                return;
            }
            if(!sonComment){
                alert('请输入评论');
                return;
            }
            this.userData.push({id:Date.now(),username:sonUserName,comment:sonComment});
        });

        this.$EventBus.$on('removeCommentItem',id => {
            this.userData = this.userData.filter((item) => {
                return item.id != id ? item : '';
            })
        });
    },
    beforeDestroy(){
        this.$EventBus.$off('getUserData');
        this.$EventBus.$off('removeCommentItem');
    },
    components: {
        CommentItem
    },
    data: function(){
    return{
      userData: []
    }
  }
}
</script>